<template>
  <div class="main">
    <div class="toolbar bg-white block p-5">
      <div class="inline-block mr-3">
        <span>书籍名称</span>
        <el-input
          class="inline w-50px ml-2"
          v-model="bookName"
          placeholder="书籍名称"
        />
      </div>

      <div class="inline-block mr-3">
        <span>科目</span>
        <el-select v-model="subject" class="m-2 ml-2" placeholder="科目">
          <el-option
            v-for="item in subjects"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <div class="inline-block mr-3">
        <span>状态</span>
        <el-select v-model="subject" class="m-2 ml-2" placeholder="状态">
          <el-option
            v-for="item in subjects"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <el-button type="primary">查询</el-button>
      <el-button>重置</el-button>
    </div>
    <div class="content p-3 bg-white mt-3">
      <div class="top">
        <el-button type="primary" @click="onClickCreate()">创建书籍</el-button>
        <el-button disabled>标注指派</el-button>
      </div>
      <div class="list">
        <el-table :data="tableData" class="mt-5" border>
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" label="Address" />

          <el-table-column label="操作">
            <el-link type="primary" class="ml-2" @click="onClickMarkerOrder(1)"
              >标注指派</el-link
            >
            <el-link type="primary" class="ml-2" @click="onClickCreate()"
              >编辑</el-link
            >
            <el-link type="primary" class="ml-2" @click="onClickDeleteBook(1)"
              >删除</el-link
            >
          </el-table-column>
        </el-table>

        <div class="flex justify-end">
          <pagination v-model="pagerBookList" @change="getBookList" />
        </div>
      </div>
    </div>

    <el-dialog v-model="bookDialogVisible" title="创建书籍" width="60%">
      <div class="flex flex-row">
        <div class="left w-2/5 p-1">
          <el-form :model="formUploadBook" label-width="50px">
            <el-form-item label="书名">
              <el-input v-model="formUploadBook"></el-input>
            </el-form-item>
          </el-form>

          <el-form :model="formUploadBook" label-width="50px">
            <el-form-item label="科目">
              <el-select class="w-full" v-model="subject" placeholder="科目">
                <el-option
                  v-for="item in subjects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>

          <el-form :model="formUploadBook" label-width="50px">
            <el-form-item label="上传">
              <upload
                v-if="true"
                :data="{ cid: 1 }"
                type="image"
                :show-progress="true"
              >
                <el-button type="primary">上传pdf</el-button>
              </upload>
            </el-form-item>
          </el-form>
        </div>
        <div class="right w-2/5 p-2">
          <upload
            v-if="true"
            :data="{ cid: 1 }"
            type="image"
            :show-progress="true"
          >
            <el-button type="primary">本地上传</el-button>
          </upload>

          <img
            src="https://wisdomebook.oss-cn-hangzhou.aliyuncs.com/yale_test/book.png"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="bookDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="bookDialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="markerOrderDialogVisible" title="标注指派" width="50%">
      <div class="">
        <div>书名：xxxx</div>
        <div>此书已经指派给：任亚乐</div>
        <div>
          <span>指派给：</span>
          <el-select
            v-model="subject"
            class="m-2 ml-2"
            placeholder="选择指派人"
          >
            <el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="markerOrderDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="markerOrderDialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="deleteDialogVisible"
      title="确定删除书籍吗？"
      width="60%"
    >
      <div class="flex flex-row"></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onClickDeleteBookSure(1)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
    <script lang="ts" setup>
// import {
//   getWisdBookList,
//   markerOrder,
//   deleteWisdBook,
//   createWisdBook,
//   updateWisdBook,
//   getMarkerOrder,
// } from "@/api/wisdbook";

import { usePaging } from "@/hooks/usePaging";
let bookName = ref("");

let subjects = ref([
  {
    value: 1,
    label: "全部",
  },
  {
    value: 2,
    label: "2",
  },
]);

let subject = ref(subjects.value[0].label);
const status = ref(subjects.value[0].label);
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

let bookDialogVisible = ref(false);
const onClickCreate = () => {
  bookDialogVisible.value = true;
};
let markerOrderDialogVisible = ref(false);
const onClickMarkerOrder = (bookId) => {
  markerOrderDialogVisible.value = true;
};
let deleteDialogVisible = ref(false);
const onClickDeleteBook = (bookId) => {
  deleteDialogVisible.value = true;
};
const onClickDeleteBookSure = (bookId) => {
  deleteDialogVisible.value = false;
};

let formUploadBook = ref({});

// const { pagerBookList, getBookList } = usePaging({
//   fetchFun: getWisdBookList,
// });
</script>
      
  <style lang="scss" scoped>
</style>